<template>
  <el-dialog
    v-model="state.visable"
    :title="state.webType ? '更改模式' : '新建模板'"
    :close-on-click-modal="false"
    lock-scroll
    class="Good-dialog_center"
    :width="state.webType ? '550px' : '800px'"
  >
    <div class="add-main">
      <div class="add-item add-item-form" @click="add('form')" v-if="state.webType !== 'form'">
        <i class="add-icon fa fa-table"></i>
        <div class="add-txt">
          <p class="add-title">表单</p>
          <p class="add-desc">纯表单设计</p>
        </div>
      </div>
      <div class="add-item add-item-list" @click="add('list')" v-if="state.webType !== 'list'">
        <i class="add-icon iconfont icon-zidingyibuju"></i>
        <div class="add-txt">
          <p class="add-title">列表</p>
          <p class="add-desc">表单+列表设计</p>
        </div>
      </div>
      <div class="add-item" @click="add('flow')" v-if="state.webType !== 'flow'">
        <i class="add-icon iconfont icon-shuxingtu"></i>
        <div class="add-txt">
          <p class="add-title">流程</p>
          <p class="add-desc">表单+列表+流程设计</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const state = reactive({
  visable: false,
  webType: ""
});
const openDialog = (webType: string) => {
  state.visable = true;
  state.webType = webType;
};

const emits = defineEmits(["add"]);
//打开表单设计
const add = (webType: string) => {
  state.visable = false;
  state.webType = webType;
  emits("add", state.webType);
};
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.add-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .add-item {
    display: flex;
    align-items: center;
    width: 230px;
    height: 136px;
    padding-left: 20px;
    cursor: pointer;
    background: #eff9ff;
    &:hover {
      opacity: 0.9;
    }
    &.add-item-form {
      background: #f1f5ff;
      .add-icon {
        color: #537eff;
        background: #ccd9ff;
      }
    }
    &.add-item-list {
      background: #fef3e6;
      .add-icon {
        color: #ea986c;
        background: #fce1bf;
      }
    }
    .add-icon {
      flex-shrink: 0;
      width: 56px;
      height: 56px;
      margin-right: 10px;
      font-size: 30px;
      line-height: 56px;
      color: #46adfe;
      text-align: center;
      background: #ceeaff;
      border-radius: 10px;
    }
    .add-txt {
      height: 56px;
      p {
        line-height: 28px;
      }
      .add-title {
        font-size: 18px;
        font-weight: bold;
      }
      .add-desc {
        font-size: 12px;
        color: #8d8989;
      }
    }
  }
}
</style>
